Wireframe可以把它想成是網站介面的「骨架」。
在這個階段，不會先考慮:
而是先確認:
這個頁面要放什麼？放在哪裡？使用者要怎麼操作？
先把結構確定，再處理外觀。
一開始其實很容易有一個想法:
既然都要做網站了，那我就直接開始選顏色、找圖片、設計漂亮的按鈕。
但如果太早進入視覺設計，反而可能遇到一個問題:
畫面很好看，但使用者不知道要怎麼使用。
例如首頁如果放了很多資訊:
全部都很重要，結果最後可能變成:
什麼都有，但使用者不知道哪個最重要。
所以我這次先用Wireframe把資訊架構整理清楚。
從這張的Wireframe圖可以看到，我將首頁主要分成快速服務、尋找醫師、最新公告等區域。
這樣使用者進入首頁後，可以很快找到自己需要的功能。
如果使用者已經知道自己想找哪一位醫師，或是想尋找某個科別，不一定需要先進入完整的醫師查詢頁。
所以首頁直接提供尋找醫師的服務，讓首頁不只是「展示醫院資訊」，也可以直接成為使用者進入預約流程的入口。
這個設計也和Day 3的User Flow有關。
提供醫院近期的重要資訊，例如門診異動、系統維護、假日門診等。這些資訊可能會直接影響使用者的預約或就醫，因此放在首頁，讓使用者進入網站後可以快速注意到。
第一個製作的是醫院網站首頁Wireframe。
一開始我其實不太確定：
醫院網站首頁到底應該放哪些東西？
如果參考一般企業網站，可能會把大量篇幅放在品牌形象、公司介紹或最新消息。
但我的系統主要目的是:
讓使用者可以快速完成醫院相關操作。
所以我將幾個比較常用的功能和資訊放在首頁，方便使用者使用。
這個頁面主要不是提供預約等系統功能，而是讓使用者了解醫院本身。
介紹醫院的基本資訊，讓使用者可以快速了解醫院有哪些服務。
整理醫院提供的主要醫療服務，讓使用者可以快速了解醫院有哪些服務。
介紹醫院的醫療團隊，讓使用者可以進一步了解醫師和相關醫療人員。
提供醫院的位置、交通方式與聯絡資訊，方便使用者前往醫院。
一開始我有思考：
醫院介紹頁要直接放在首頁，還是獨立成一個頁面
最後我決定將兩者分開。
首頁主要負責：
讓使用者快速找到功能
醫院介紹頁則負責：
讓使用者了解這件醫院
這樣可以將「網站介紹內容」與「系統功能」區分開來，也讓首頁不需要放入太多介紹性的內容。
這個頁面的主要目的是讓使用者可以找到自己想預約的醫師。
使用者可以透過搜尋功能尋找：
讓使用者不用從所有醫師中慢慢尋找。
除了直接搜尋之外，也可以透過科別進行篩選，例如：
讓使用者可以快速縮小搜尋範圍。
如果醫院的醫師數量很多，全部顯示在同一頁可能會讓頁面過長。
因此加入分頁功能，讓使用者可以：
第 1 頁 -> 第 2 頁 -> 第 3 頁
依序查看醫師。
一開始我不確定：
醫師查詢頁應該顯示多少位醫師。
如果全部顯示，頁面可能會變得很長，也不容易找到想要的醫師。
因此我加入「搜尋」、「科別篩選」與「分頁」，讓使用者可以透過不同方式快速找到醫師。
這樣也能讓醫師列表保持比較簡潔，不會因為醫師數量增加而讓頁面變得難以使用。
這個頁面主要是讓使用者在預約之前，先了解醫師的相關資料。
顯示：
讓使用者可以快速確認目前查看的是哪一位醫師。
提供醫師的學經歷資訊，讓使用者可以進一步了解醫師的專業背景。
顯示醫師的門診時間，讓使用者可以先確認適合自己的看診時段。
如果使用者確認醫師符合需求，就可以直接點擊「立即預約」進入預約流程。
因此整個操作會變成：
醫師查詢->找到醫師->醫師詳細資訊->了解醫師->立即預約
我認為醫師詳細資訊頁不能只有：
醫師姓名＋預約按鈕
因為使用者在預約之前，還需要知道醫師的科別、專長、學經歷以及門診時間。
因此我將這些資訊整理在同一個頁面，讓使用者可以先了解醫師，再決定是否進行預約。
這樣也能讓Day 3規劃的User Flow真正對應到實際的網站畫面。
這個頁面是整個醫院預約流程中比較重要的部分，主要讓使用者選擇看診日期、時間，並確認預約資料。
顯示目前選擇的：
讓使用者確認自己預約的是哪一個時段。
預約時需要確認病人的基本資料。
原本我有考慮讓使用者重新輸入：
但這樣會讓使用者在註冊時填寫一次，預約時又重新填寫一次。
因此最後規劃成：
登入會員後，自動帶入註冊時填寫的基本資料。
使用者只需要確認資料，如果有需要修改，也可以進行調整。
另外讓使用者填寫這次預約的就診原因，方便醫院了解使用者此次看診的需求。
這次預約掛號頁遇到的主要問題是：
病人的基本資料到底要不要重新填寫？
如果每次預約都要重新輸入完整資料，會增加使用者操作的時間。
因此我決定讓註冊時建立的會員資料，在登入後自動帶入預約頁，
這樣可以減少重複輸入，也讓預約流程更加順暢。
完成預約之後，使用者會進入預約成功頁。
這個頁面的主要目的是讓使用者確認這筆預約是否真的成功。
顯示系統建立的預約編號，方便之後查詢預約。
顯示：
讓使用者可以再次確認預約內容。
如果使用者想進一步查看預約，可以直接進入「我的預約」。
如果已經確認預約內容沒有問題，也可以直接返回首頁。
我希望使用者完成預約後，不只是看到「預約成功」四個字，而是可以立即確認完整的預約資訊。
因此將預約編號、醫師、日期、時間與就診者資料整理在同一個頁面。
如果發現資訊有問題，也可以直接進入「我的預約」查看。
完成預約後，使用者之後還會需要查看自己的預約，因此我另外設計了「我的預約」頁。
將使用者目前的預約整理成列表，讓使用者可以快速查看。
提供不同狀態的篩選，例如：
使用者可以根據預約狀態快速找到需要查看的資料。
每一筆預約都提供「查看詳情」功能，使用者可以進一步查看完整預約資訊。
因為使用者可能會有多筆預約，如果全部資料直接放在一起，會比較難找到需要的預約。
所以我加入預約狀態篩選，讓使用者可以快速區分目前的預約狀態。
這個頁面也可以和前面的「預約成功頁」連接，讓使用者完成預約後可以繼續管理自己的預約。
當使用者在「我的預約」中點擊查看詳情後，就會進入預約詳細資訊頁。
這個頁面主要提供單筆預約的完整資訊。
顯示：
顯示這筆預約所使用的就診者資料。
讓使用者可以確認預約時所使用的資料是否正確。
如果使用者臨時無法前往，可以點擊「取消預約」。
一開始我有思考：
查看預約詳情要不要直接用彈出視窗？
但預約詳細資訊包含的內容比較多，如果全部放在小型視窗中，可能會讓畫面變得擁擠。
因此最後決定使用獨立頁面呈現，讓使用者可以更完整地查看這筆預約。
而取消預約只是其中一個操作，所以再從詳細頁進入取消流程。
當使用者點擊「取消預約」後，我另外規劃了取消預約的確認畫面。
這個頁面主要不是再次顯示所有預約資訊，而是讓使用者確認是否真的要取消這筆預約？
顯示簡單的確認訊息，例如：
確定要取消這筆預約嗎？
並提供：
兩個操作。
使用者確認後，系統會進入預約取消成功頁。
一開始我不確定取消預約應該直接切換新頁面，還是使用彈出的方式呈現。
因為取消預約主要只需要使用者確認一個動作，所以我認為沒有必要為了一個簡單的確認操作，再讓使用者切換一個完整頁面。
因此之後在Prototype階段，預計將這個確認區塊設計成從畫面下方往上彈出的Bottom Sheet。
這樣可以保留目前的預約詳細資訊，同時讓使用者快速完成確認。
完成取消預約後，使用者會進入預約取消成功頁。
這個頁面主要讓使用者確認預約已經成功取消。
顯示取消成功的訊息，讓使用者知道系統已經完成操作。
提供「返回我的預約」按鈕，讓使用者可以回到預約列表查看最新狀態。
和預約成功頁的設計一樣，我希望使用者完成操作後，可以得到明確的結果回饋。
因此不只是執行取消，而是另外提供「取消成功」的畫面，讓使用者知道這次操作已經完成。
讓已經註冊的使用者登入系統，進入需要會員功能的頁面。
讓新使用者建立帳號，並填寫基本資料。
這些資料之後也會提供給預約掛號頁自動帶入，減少使用者重複輸入。
提供使用者在就醫前可能需要了解的資訊，例如：
讓使用者可以在預約之外，也能快速找到就醫相關資訊。
這幾個頁面分別負責不同的功能。
登入與註冊主要處理會員功能，而就醫資訊則是提供使用者查詢就醫相關內容。
因此我將這些功能獨立成不同頁面，避免把所有資訊集中在首頁，讓整個網站的資訊架構更加清楚。
這次製作Wireframe時，我遇到的問題主要不是Figma操作本身，而是：
一個醫院網站到底應該怎麼安排內容與功能？
例如：
1.首頁應該放哪些內容？
2.哪些功能應該放在快速服務？
3.醫師查詢頁應該顯示多少位醫師？
4.搜尋與科別篩選應該怎麼安排？
5.預約時要不要重新填寫病人資料？
6.查看預約詳情要不要跳頁？
7.取消預約要使用新頁面還是彈出視窗？
這些問題如果沒有先想清楚，直接進入UI Design，很容易做到一半又需要重新修改。
這次我主要是從User Flow和使用者操作情境回頭思考每一個頁面的需求。
例如：
如果使用者想找醫師：
首頁->搜尋醫師->醫師查詢->醫師詳細資訊
所以需要搜尋、篩選與醫師詳細資訊。
如果使用者想預約：
醫師詳細資訊->立即預約->預約掛號->預約成功
所以需要安排日期、時間與病人資料。
如果使用者想取消預約：
我的預約->預約詳細資訊->取消預約->取消成功
所以需要提供預約詳情與取消確認。
透過這樣的方式，我可以從使用者需求回推每個頁面需要放什麼，而不是單純把功能全部放進網站。
今天主要學習的是如何使用Figma製作Wireframe，以及如何從使用者需求規劃網站的資訊架構。
這次讓我比較有感的是：
* 了解 Wireframe 的用途
* 了解網站資訊架構的重要性
* 開始區分「網站介紹內容」與「系統功能」
* 了解首頁需要優先呈現使用者常使用的功能
* 了解搜尋、篩選與分頁在醫師列表中的用途
* 思考會員資料與預約資料之間的關聯
* 思考不同操作應該使用「換頁」還是「彈出視窗」
* 練習使用Figma規劃網站頁面結構
以前可能會覺得：
Wireframe就是把框框畫一畫。
但實際開始製作後，才發現真正需要思考的是：
每個框框裡面到底應該放什麼，以及使用者為什麼需要它。
這次在製作Wireframe的過程中，也有使用AI協助發想排版與資訊架構。
主要詢問 AI：
* 首頁資訊架構是否合理
* 哪些功能適合放在首頁
* 醫師查詢頁可以加入哪些功能
* 預約流程需要哪些資料
* 預約詳細資訊適合如何呈現
* 取消預約適合使用什麼互動方式
透過AI提供不同的想法，再根據自己的系統需求進行判斷與修改。
因此AI比較像是協助我多一個角度思考，而不是直接照著AI的結果製作。
iThome鐵人賽
看影片追技術